<template>
	<view class="container">
		<!-- 顶部Header -->
		<view class="header">
			<view class="header-left" @click="goBack">
				<u-icon name="arrow-left" size="40" color="#ffffff"></u-icon>
			</view>
			<view class="header-title">热门歌手</view>
			<view class="header-right">
				<u-icon name="search" size="32" color="#ffffff" @click="onSearch"></u-icon>
			</view>
		</view>

		<!-- 歌手列表 -->
		<scroll-view
			scroll-y
			class="singer-list-scroll"
			@scrolltolower="loadMoreSingers"
			:refresher-enabled="true"
			lower-threshold="50"
			:refresher-triggered="isRefreshing"
			@refresherrefresh="onRefresh"
		>
			<!-- 加载状态 -->
			<view v-if="isLoading && singerList.length === 0" class="loading-container">
				<view class="loading-spinner"></view>
				<text class="loading-text">正在加载歌手列表...</text>
			</view>

			<!-- 歌手网格 -->
			<view v-else class="singer-grid">
				<view class="singer-card" v-for="(singer, idx) in singerList" :key="idx" @click="goSingerDetail(singer)">
					<image :src="singer.singer_avatar || singer.avatar || singer.image || '/static/singer/default.jpg'" class="singer-avatar" mode="aspectFill" />
					<view class="singer-info">
						<view class="singer-name">{{ singer.singer_name || singer.name }}</view>
						<view class="singer-desc">热度{{ singer.heat || 0 }}</view>
					</view>
				</view>
			</view>

			<!-- 加载更多状态 -->
			<view v-if="isLoadingMore" class="loading-more">
				<view class="loading-spinner-small"></view>
				<text class="loading-more-text">加载更多...</text>
			</view>

			<!-- 没有更多数据 -->
			<view v-if="!hasMore && singerList.length > 0" class="no-more">
				<text class="no-more-text">没有更多歌手了</text>
			</view>

			<!-- 空状态 -->
			<view v-if="!isLoading && singerList.length === 0" class="empty-state">
				<u-empty mode="list" text="暂无歌手数据"></u-empty>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import request from '@/common/request.js';

export default {
	data() {
		return {
			orderId: '',
			singerList: [],
			currentPage: 1,
			pageSize: 20,
			isLoading: false,
			isLoadingMore: false,
			isRefreshing: false,
			hasMore: true
		};
	},
	onLoad(options) {
		this.orderId = options.order_id || '';
		this.loadSingerList();
	},
	methods: {
		goBack() {
			uni.navigateBack();
		},
		onSearch() {
			uni.showToast({
				title: '搜索功能开发中',
				icon: 'none'
			});
		},
		// 加载歌手列表
		async loadSingerList(isRefresh = false) {
			if (isRefresh) {
				this.currentPage = 1;
				this.hasMore = true;
				this.isRefreshing = true;
			} else {
				this.isLoading = true;
			}

			try {
				const res = await request.httpTokenRequest({
					url: `/api/ktv/getHotSinger?order_id=${this.orderId}&page=${this.currentPage}&page_size=${this.pageSize}`,
					method: 'get'
				});

				if (res.data.code === 1) {
					let singers = [];
					if (res.data.data && res.data.data.hot_singer && res.data.data.hot_singer.data) {
						singers = res.data.data.hot_singer.data;
					} else if (res.data.data && res.data.data.hot_singer) {
						singers = res.data.data.hot_singer;
					} else if (res.data.data && Array.isArray(res.data.data)) {
						singers = res.data.data;
					} else if (res.data.data && res.data.data.list) {
						singers = res.data.data.list;
					}

					if (isRefresh || this.currentPage === 1) {
						this.singerList = singers || [];
					} else {
						this.singerList = [...this.singerList, ...(singers || [])];
					}

					// 判断是否还有更多数据
					this.hasMore = singers && singers.length >= this.pageSize;
					// console.log(this.hasMore);
				} else {
					throw new Error(res.data.msg || '获取歌手列表失败');
				}
			} catch (error) {
				console.error('获取歌手列表失败:', error);
				this.$u.toast(error.message || '获取歌手列表失败');
			} finally {
				this.isLoading = false;
				this.isLoadingMore = false;
				this.isRefreshing = false;
			}
		},
		// 下拉刷新
		onRefresh() {
			this.loadSingerList(true);
		},
		// 上拉加载更多
		loadMoreSingers() {
			console.log(123);
			if (this.isLoadingMore || !this.hasMore) return;

			this.isLoadingMore = true;
			this.currentPage++;
			this.loadSingerList();
		},
		// 跳转到歌手详情
		goSingerDetail(singer) {
			const singerName = singer.name || singer.singer_name || '未知歌手';
			uni.navigateTo({
				url: `/pages/song/singer?name=${encodeURIComponent(singerName)}&order_id=${this.orderId}&singer_avatar=${singer.singer_avatar}`
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.container {
	background-color: #0d0d11;
	color: #ffffff;
	height: 100vh;
	display: flex;
	flex-direction: column;
}

.header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 88rpx;
	padding: 120rpx 20rpx 20rpx 20rpx;
	flex-shrink: 0;
}

.header-title {
	font-size: 36rpx;
	font-weight: bold;
}

.singer-list-scroll {
	flex: 1;
	padding: 0 20rpx;
	height: 100%; /* 确保scroll-view占据剩余高度 */
}

.loading-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 100rpx 0;
	gap: 20rpx;
}

.loading-spinner {
	width: 40rpx;
	height: 40rpx;
	border: 4rpx solid #f3f3f3;
	border-top: 4rpx solid #3c82ff;
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

.loading-spinner-small {
	width: 30rpx;
	height: 30rpx;
	border: 3rpx solid #f3f3f3;
	border-top: 3rpx solid #3c82ff;
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

.loading-text {
	font-size: 28rpx;
	color: #888888;
}

.singer-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20rpx;
	padding: 20rpx 0;
}

.singer-card {
	background-color: #1a1a1f;
	border-radius: 15rpx;
	padding: 20rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	transition: all 0.3s;

	&:active {
		transform: scale(0.98);
		background-color: #2a2a2f;
	}
}

.singer-avatar {
	width: 120rpx;
	height: 120rpx;
	border-radius: 50%;
	border: 2rpx solid #333;
	margin-bottom: 15rpx;
}

.singer-info {
	text-align: center;
	width: 100%;
}

.singer-name {
	font-size: 28rpx;
	font-weight: 500;
	color: #ffffff;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-bottom: 8rpx;
}

.singer-desc {
	font-size: 24rpx;
	color: #888888;
}

.loading-more {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 30rpx 0;
	gap: 15rpx;
}

.loading-more-text {
	font-size: 26rpx;
	color: #888888;
}

.no-more {
	display: flex;
	justify-content: center;
	padding: 30rpx 0;
}

.no-more-text {
	font-size: 26rpx;
	color: #666666;
}

.empty-state {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 60vh;
}
</style>